<script setup lang="ts">
import type { TimeWeather, NextWeekWeather, CurrentWeather } from '@/types';
import { weatherIcon } from '@/utils/utils';

withDefaults(
  defineProps<{
    timeWeatherArr: TimeWeather[];
    nextWeekWeatherArr: NextWeekWeather[];
    currentWeather: CurrentWeather;
    currentCity: string;
  }>(),
  {
    timeWeatherArr: () => [],
    nextWeekWeatherArr: () => [],
    currentWeather: () => ({}),
    currentCity: ''
  }
);
</script>
<template>
  <view class="tc fs38 f600 common-black">{{ currentCity }}</view>
  <view class="tc f600 common-black mt20 fs40">{{ currentWeather.currentTemperature }}℃</view>
  <view class="tc f600 common-black mt25 fs32">{{ currentWeather.weather }}</view>
  <view class="tc f600 common-black mt10 fs32">
    <text class="mr20">最高{{ currentWeather.maxTemperature }}℃</text>
    <text>最低{{ currentWeather.minTemperature }}℃</text>
  </view>

  <view class="p20 hour-forecast mt20">
    <view class="hour-forecast-title f-c">
      <i class="t-icon t-icon-shizhong mr15"></i>
      <text>每小时天气预报</text>
    </view>
    <scroll-view scroll-x="true" class="hour-forecast-list mt20">
      <view v-for="item in timeWeatherArr" :key="item.time" class="hour-forecast-list-item">
        <view>{{ item.time }}</view>
        <view class="mv10 t-icon weatherIcon" :class="weatherIcon(item.weather)"></view>
        <view class="fs26">{{ item.temperature }}</view>
      </view>
    </scroll-view>
  </view>

  <view class="p20 next-forecast mt20">
    <view class="next-forecast-title f-c">
      <i class="t-icon t-icon-shizhong mr15"></i>
      <text>近7日天气预报</text>
    </view>
    <view class="nextWeek-list">
      <view class="nextWeek-list-item" v-for="item in nextWeekWeatherArr" :key="item.time">
        <view class="nextWeek-list-item-time">{{ item.time }}</view>
        <view class="nextWeek-list-item-weather t-icon weatherIcon" :class="weatherIcon(item.weather)"></view>
        <view class="nextWeek-list-item-interval">{{ item.minTemperature }} ~ {{ item.maxTemperature }}</view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.common-black {
  color: rgba(16, 16, 16, 0.8);
}
.hour-forecast,
.next-forecast {
  border: 1px solid #ccc;
  border-radius: 10px;
  &-title {
    border-bottom: 1px solid rgb(155, 152, 152);
    padding: 0 10rpx 10rpx 10rpx;
  }
  &-list {
    white-space: nowrap;
    width: 100%;
    &-item {
      width: 15%;
      display: inline-block;
      text-align: center;
    }
  }
  .nextWeek-list-item {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1px solid #ccc;
    &-time {
      flex: 1;
      text-align: center;
    }
    &-weather {
      flex: 2;
      text-align: center;
    }
    &-interval {
      flex: 3;
      text-align: center;
    }
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
}
</style>
